﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>III级机构设置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        .page-container {
            margin: 20px;
        }

        .el-table__header, .el-table__body {
            min-width: 800px;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .breadcrumb {
            margin-bottom: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="app" class="page-container">
        <div class="breadcrumb">
            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--III级机构设置--III级机构添加
        </div>

        <el-form :model="formData" ref="formRef" label-width="180px">
            <!-- I级机构选择 -->
            <el-form-item label="I级机构名称">
                <el-select v-model="formData.first_kind_name"
                           v-on:change="handleFirstKindChange"
                           placeholder="请选择I级机构名称"
                           class="input-width">
                    <el-option v-for="item in firstKindOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="II级机构名称">
                <el-select v-model="formData.second_kind_name"
                           v-on:change="handleSecondKindChange"
                           placeholder="请选择II级机构名称"
                           class="input-width">
                    <el-option v-for="item in secondKindOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <!-- III级机构编号（自动生成或手动输入） -->
            <el-form-item label="III级机构编号">
                <el-input v-model="formData.third_kind_id"
                          placeholder="请输入III级机构编号"
                          class="input-width"></el-input>
            </el-form-item>

            <!-- III级机构名称 -->
            <el-form-item label="III级机构名称">
                <el-input v-model="formData.third_kind_name"
                          placeholder="请输入III级机构名称"
                          class="input-width"
                          required></el-input>
            </el-form-item>

            <!-- 销售责任人编号 -->
            <el-form-item label="销售责任人编号">
                <el-input v-model="formData.third_kind_sale_id"
                          placeholder="请输入销售责任人编号"
                          class="input-width"
                          required></el-input>
            </el-form-item>

            <!-- 是否为零售店 -->
            <el-form-item label="是否为零售店">
                <el-select v-model="formData.third_kind_is_retail"
                           placeholder="请选择"
                           class="input-width">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                </el-select>
            </el-form-item>

            <!-- 操作按钮 -->
            <el-form-item>
                <el-button type="primary" v-on:click="handleSubmit">提交</el-button>
                <el-button v-on:click="handleBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>

    <script>
        const { createApp, ref, reactive, watch } = Vue;
        const { ElMessage } = ElementPlus;
        const { ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                const formData = reactive({
                    ftk_id: null,
                    first_kind_id: null,
                    first_kind_name: '',
                    second_kind_id: null,
                    second_kind_name: '',
                    third_kind_id: '',
                    third_kind_name: '',
                    third_kind_sale_id: '',
                    third_kind_is_retail: '是'
                });

                // I级机构选项
                const firstKindOptions = ref([
                    { value: null, label: '请选择I级机构' },
                    { value: '02', label: 'Ⅰ级结构' },
                    { value: '01', label: '集团' },
                    { value: '03', label: '总部' }
                ]);

                // II级机构选项
                const secondKindOptions = ref([
                    { value: null, label: '请选择II级机构' },
                    { value: '01', label: '软件公司' },
                    { value: '02', label: '北京分校区' },
                    { value: '03', label: '湖南分校区' }
                ]);

                // 初始化表单数据
                const initFormData = () => {
                    const encodedData = new URLSearchParams(window.location.search).get('data');
                    if (encodedData) {
                        try {
                            const data = JSON.parse(decodeURIComponent(encodedData));
                            Object.assign(formData, data);
                            console.log('初始化表单数据:', formData);
                        } catch (error) {
                            console.error('解析数据失败:', error);
                            ElMessage.error('数据加载失败');
                        }
                    }
                };

                // I级机构变更事件
                const handleFirstKindChange = (value) => {
                    const item = firstKindOptions.value.find(i => i.value === value);
                    formData.first_kind_name = item?.label || '';
                };

                // II级机构变更事件
                const handleSecondKindChange = (value) => {
                    const item = secondKindOptions.value.find(i => i.value === value);
                    formData.second_kind_name = item?.label || '';
                };
               
                // 监听URL变化
                watch(() => window.location.search, initFormData, { immediate: true });

                // 提交表单
                const handleSubmit = async () => {
                    console.log(formData)
                    try {
                        // 表单验证
                        if (!formData.third_kind_name) {
                            ElMessage.warning('请输入III级机构名称');
                            return;
                        }

                        if (!formData.third_kind_sale_id) {
                            ElMessage.warning('请输入销售责任人编号');
                            return;
                        }

                        // 确认对话框
                        

                        // 提交数据
                        const response = formData.ftk_id
                            ? await axios.post('/config/thirdUpdate', formData)
                            : await axios.post('/config/thirdInsert', formData);

                        if (response.data.success) {
                            ElMessage.success(formData.ftk_id ? '修改成功' : '新增成功');
                             window.location.href = "@Url.Action("config_file_third_kind", "config")";
                            setTimeout(() => {
                                window.history.back();
                            }, 1500);
                        } else {
                            ElMessage.error(response.data.message || '操作失败');
                        }
                    } catch (error) {
                        if (error.name !== 'Cancel') {
                            ElMessage.error('操作失败，请检查网络或联系管理员');
                        }
                    }
                };

                // 返回按钮
                const handleBack = () => {
                    window.history.back();
                };

                return {
                    formData,
                    firstKindOptions,
                    secondKindOptions,
                    handleFirstKindChange,
                    handleSecondKindChange,
                    handleSubmit,
                    handleBack
                };
            }
        })
        .use(ElementPlus, { locale: ElementPlusLocaleZhCn })
        .mount('#app');
    </script>
</body>
</html>